/**
 * 测试
 */
<template>
    <div class="recipe-order">
        <!--步骤-->
        <div class="step-wrap">
            <van-steps>
                <van-step>下单</van-step>
                <van-step>划价</van-step>
                <van-step>付款</van-step>
                <van-step>配方</van-step>
                <van-step>送药</van-step>
                <van-step>完成</van-step>
            </van-steps>
        </div>
        <!--公告-->
        <div class="notice-wrap">
            <van-notice-bar text="测试"></van-notice-bar>
        </div>
        <!--处方信息-->
        <van-panel title="处方信息">
            <div>
                <van-row>
                    <van-col span="12">
                        <!--图片上传-->
                        <van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
                            <van-icon name="photograph" />
                        </van-uploader>
                    </van-col>
                    <van-col span="12">
                        <div>副数</div>
                        <van-stepper v-model="shuLiang" />
                    </van-col>
                </van-row>
            </div>
        </van-panel>
        <!--代熬药确认-->
        <!--药材选择-->
        <van-panel title="选择药材" desc="示例药材：黄芪">
            <div>

            </div>
            <div slot="footer">
                <span>注：仅部分品种支持使用精选</span>
                <a href="">什么是精选药材？</a>
            </div>
        </van-panel>
        <!--收货人信息-->
        <van-panel title="收货人信息" desc="请填写真实信息">
            <div>
                <van-cell-group>
                    <van-field label="真实姓名" placeholder="请输入您的真实姓名" required></van-field>
                    <van-field label="联系电话" placeholder="请输入您的手机号码" required></van-field>
                    <van-field label="收件地址" placeholder="" required></van-field>
                    <van-field label="详细地址" placeholder="请输入您的详细地址" required></van-field>
                </van-cell-group>
            </div>
        </van-panel>
        <!--支付配送-->

        <!--备注信息-->
        <van-panel title="留言备注" desc="其他要求及注意事项">
            <div>
                <van-field
                        type="textarea"
                        placeholder="请输入留言"
                        rows="1"
                        autosize
                />
            </div>
        </van-panel>
    </div>
</template>

<script>
    import {Step, Steps, NoticeBar, Panel, Row, Col, Uploader, Icon, Stepper, Field, Cell, CellGroup} from 'vant';
    export default {
        name: "RecipeOrder",
        components: {
            [Step.name]: Step,
            [Steps.name]: Steps,
            [NoticeBar.name]: NoticeBar,
            [Panel.name]: Panel,
            [Row.name]: Row,
            [Col.name]: Col,
            [Uploader.name]: Uploader,
            [Icon.name]: Icon,
            [Stepper.name]: Stepper,
            [Field.name]: Field,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup

        },
        data () {
            return {
                shuLiang: 1
            }
        },
        methods: {
            onRead (file) {
                console.log(file)
            }
        }
    }
</script>

<style scoped>

</style>